<template>
	<view class="i-fixed-button" :style="[boxStyle]">
		<view v-for="(item, index) in option.list" :key="index">
			<!-- #ifdef MP-WEIXIN||MP-ALIPAY -->
			<button
				open-type="contact" show-message-card
				class="app-mp-contact-btn button-item e-flex-xy-center"
				:style="[itemStyle]"
				v-if="MPAPP_CONTACT&&item.type == 2&&!item.link.linkUrl&&!item.link.pageUrl"
			>
				<image  mode="aspectFill" class="image" :src="$fullLink(item.url)">
				</image>
			</button>
			<view
				class="button-item e-flex-xy-center"
				:style="[itemStyle]"
				@tap="tapButton(item)"
				v-else
			>
				<image  mode="aspectFill" class="image" :src="$fullLink(item.url)">
				</image>
			</view>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN ||MP-ALIPAY -->
			<view
				class="button-item e-flex-xy-center"
				:style="[itemStyle]"
				@tap="tapButton(item)"
			>
				<image  mode="aspectFill" class="image" :src="$fullLink(item.url)">
				</image>
			</view>
			<!-- #endif -->
		</view>
		
	</view>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
	import { useLayoutCompoments } from './hooks'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import {px2rpx} from './utils'
	import type {pageLink} from './type'
	import {
		MPAPP_CONTACT
	} from "@/env"
	
	type ButtonItem = {
		url:string
		type:0|1|2
		link:pageLink
	}
	
	const props = withDefaults(defineProps<{
		option : {
			list:ButtonItem[]
			buttonPosition: number
			backgroundColor: string
			iconMargin: number
			positionX: number
			positionY: number
			radiusTop:number
			radiusBottom:number
		}
	}>(), {
		option: () => ({
			list:[],
			buttonPosition: 0,
			backgroundColor: '',
			iconMargin: 10,
			positionX: 20,
			positionY: 50,
			radiusTop:0,
			radiusBottom:0
		})
	})
	
	const ctx = useCurrentInstance()
	const { jumpLink } = useLayoutCompoments(ctx, props.option)
	
	const boxStyle = computed(() => {
		return {
			background: props.option.backgroundColor,
			[props.option.buttonPosition == 0 || props.option.buttonPosition == 2 ? 'left' : 'right']: px2rpx(props.option.positionX),
			[props.option.buttonPosition < 2 ? 'top' : 'bottom']: props.option.positionY + (props.option.buttonPosition < 2 ? 44 : 0) + 'px'
		}
	})
	
	const itemStyle = computed(() => {
		return { marginTop: px2rpx(props.option.iconMargin)}
	})
	
	
	const tapButton = ({ type, link }:ButtonItem) => {
			if (type) {
				if (type == 2) {
					console.log('联系客服')
				} else {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 100
					})
				}
			} else {
				jumpLink(link)	
			}
		}
	
</script>
<style scoped lang="scss">
.bg-red {
	background-color: var(--color-primary);
}
.i-fixed-button {
	width: 100rpx;
	position: fixed;
	z-index: $z-index-highest;
	.button-item {
		width: 92rpx;
		height: 92rpx;
		.image {
			width: 92rpx;
			height: 92rpx;
		}
		&:first-child {
			margin: 0 !important;
		}
	}
}
</style>
